<template>
    <div class="edit">
        <h1>联系人编辑</h1>
        <table width="100%">
            <tbody>
                <tr>
                    <td>姓名</td>
                    <td><input type="text" v-model.trim="form.name" /></td>
                </tr>
                <tr>
                    <td>年龄</td>
                    <td><input type="number" v-model.number="form.age" /></td>
                </tr>
                <tr>
                    <td>性别</td>
                    <td><input type="radio" value="M" v-model="form.gender" />男 <input type="radio" value="F" v-model="form.gender" />女</td>
                </tr>
                <tr>
                    <td>描述</td>
                    <td><textarea v-model.trim="form.desc"></textarea></td>
                </tr>
                <tr>
                    <td></td>
                    <td><button class="btn-edit" @click="edit">修改</button></td>
                </tr>
            </tbody>
        </table>
    </div>
</template>
<script>
    import { mapGetters, mapActions} from 'vuex';
    let contactId;
    export default {
        data(){
            return{
                form:{
                    name:"",
                    age:"",
                    gender:"",
                    desc:""
                }
            };
        },
        created(){
            let vm = this;
            contactId = vm.$route.params.contactId;
            this.getContactDetail(contactId)
            .then(function(res){
                vm.form = res.detail;
            })
        },
        computed:{
            ...mapGetters([
                //'contactDetail'
            ]),
        },
        methods:{
            ...mapActions([
                "getContactDetail",
                "editContact"
            ]),
            edit(){
                let vm = this;
                let{name,age,gender,desc} = vm.form;
                if(!name){return alert("姓名必填");}
                vm.editContact({
                    contactId,
                    name,
                    gender,
                    age,
                    desc
                }).then(function(res){
                    alert("编辑联系人信息成功");
                    vm.$router.go(-1)
                })
            }
        }
    }
</script>
<style scoped>
    .edit{font-size:1.25em; }
    .edit h1{font-size:1.5em; text-align:center }
    .edit tr td{padding:.6em 0;}
    .edit tr td:first-child{width:25%;text-align:right; padding-right:.5em;}
    .btn-edit{font-size:1.5em; padding:0 .8em;}

</style>